<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-profile">
			
			<view class="user-info" v-if="isLogin">
				<view class="user-avatar">
					<ImgVue :src="userData.avatar" />
				</view>
				<view class="user-details">
					<text class="username">{{userData.nickname}}</text>
					<text class="user-id">ID: 100{{userData.userId}}</text>
				</view>
				<view class="edit-profile" @click="goToModify">
					<uni-icons type="gear" size="24" color="#333333"></uni-icons>
				</view>
			</view>
			

			<view v-if="!isLogin" class="user-details" @click="goToLogin">
				<view class="login-prompt">
					<image class="avatar"
						src="https://ai-public.mastergo.com/ai/img_res/073e4300d43087d01108eae274791038.jpg"
						mode="aspectFill"></image>
					<text class="login-text">立即登录</text>
					<uni-icons type="right" size="14" color="#333333"></uni-icons>
				</view>
				<text class="login-desc">登录后享受更多权益</text>
			</view>

			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-value">{{ isLogin ? '368' : '--' }}</text>
					<text class="stat-label">接单数</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ isLogin ? '4.9' : '--' }}</text>
					<text class="stat-label">信誉分</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ isLogin ? '536' : '--' }}</text>
					<text class="stat-label">总收入</text>
				</view>
			</view>
		</view>
		<!-- 功能区域 -->
		<view class="feature-section">
			<view class="feature-row">
				<view class="feature-item" @click="goToWallet">
					<uni-icons type="wallet" size="28" color="#2979ff"></uni-icons>
					<text>我的钱包</text>
				</view>
				<view class="feature-item" @click='goToCollect'>
					<uni-icons type="star" size="28" color="#ff9500"></uni-icons>
					<text>收藏夹</text>
				</view>
				<view class="feature-item" @click="goToHelp">
					<uni-icons type="help" size="28" color="#34c759"></uni-icons>
					<text>帮助中心</text>
				</view>
				<view class="feature-item" @click="goToService">
					<uni-icons type="chatboxes" size="28" color="#5856d6"></uni-icons>
					<text>联系客服</text>
				</view>
			</view>
		</view>
		<!-- 订单类型切换 -->
		
		<view class="order-section-title">我的订单</view>
		<view class="order-tabs" v-if="isLogin">
			<view v-for="(tab, index) in orderTabs" :key="index"
				:class="['tab-item', activeTab === index ? 'active' : '']" @tap="() => handleTabChange(index)">
				<text>{{ tab.name }}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-list" v-if="isLogin">
			<view class="order-item" v-for="(order, index) in orders" :key="index">
				<view class="order-header">
					<view class="order-left">
						<text class="order-number">订单号：{{ order.expressNo }}</text>
						<uni-tag :text="order.status" :type="getTagType(order.status)" size="small" />
					</view>
					<text class="order-status"
						:style="getOrderStatusStyle(getStatusText(order.status))">{{getStatusText(order.status)}}</text>
					<text class="order-time">{{ order.createTime }}</text>
				</view>

				<view class="order-content">
					<view class="location-info">
						<view class="pickup-point">
							<uni-icons type="location" size="16" color="#666"></uni-icons>
							<text>取件：{{ order.deliverAddress }}</text>
						</view>
						<view class="delivery-point">
							<uni-icons type="location" size="16" color="#666"></uni-icons>
							<text>送达：{{ order.senderAddress }}</text>
						</view>
					</view>

					<view class="order-details">
						<view class="detail-item">
							<text class="label">快递大小：</text>
							<text class="value">{{ order.packageSize }}</text>
						</view>
						<view class="detail-item">
							<text class="label">配送费：</text>
							<text class="value price">¥{{ order.fee }}</text>
						</view>
					</view>
				</view>

				<view class="order-footer">
					<view class="total-amount">
						<text>总计：</text>
						<text class="amount">¥{{ order.fee }}</text>
					</view>
					<view class="action-buttons">
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>
<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
import { getUserIdFromToken } from '../../../util/util';
import { getUserInfo } from '../../../api/user';
import ImgVue from '../../../components/Img/Img.vue';
import { getAcceptOrderList, getPublishOrderList, payOrder } from '../../../api/order';
	const isLogin = ref(false)
	const activeTab = ref(0);
	const activeStatus = ref(0);
	const userData = ref(null)
	// 订单类型选项
	const orderTabs = ref([
		{ name: '我收到的', count: 12 },
		{ name: '我发出的', count: 8 },
	]);
	// 状态筛选选项
	const statusFilters = ref(['全部', '待支付', '待取件', '配送中', '已完成']);
	// 订单列表数据
	const orders = ref([]);
	
	const goToWallet=()=>{
		uni.navigateTo({
			url:'/pages/wallet/wallet'
		})
	}
	
	const goToCollect=()=>{
		uni.navigateTo({
			url:'/pages/collect/collect'
		})
	}
	
	const goToHelp=()=>{
		uni.navigateTo({
			url:'/pages/help/help'
		})
	}
	
	const goToService=()=>{
		uni.navigateTo({
			url:'/pages/Servicer/Servicer'
		})
	}
	
	const handleTabChange = (index : number) => {
		activeTab.value = index;
		if (activeTab.value === 0) {
			fetchGetAcceptOrderList();
		}
	
		fetchOrderList();
	}
	
	
	// 状态值与文字映射
	const statusMap : Record<number, string> = {
		0: '待支付',
		1: '待取件',
		2: '配送中',
		3: '已完成',
		4: '已取消'
	};
	
	// 获取状态文字显示
	const getStatusText = (status : number) : string => {
		return statusMap[status] || '未知状态'; // 如果没有匹配到状态，返回默认文字
	};
	
	// 获取状态标签类型
	const getTagType = (status : number) : string => {
		const typeMap : Record<number, string> = {
			0: 'warning', // 待支付
			1: 'primary', // 待取件
			2: 'success', // 配送中
			3: 'default', // 已完成
			4: 'danger'   // 已取消
		};
		return typeMap[status] || 'default';
	};
	
	// 状态筛选处理
	const handleStatusChange = (index : number) => {
		activeStatus.value = index;
	};
	
	
	// 支付订单
	const handlePay = (order : any) => {
		
		payOrder(order.orderId).then((res)=>{
			console.log(res.data)
		})
		console.log('支付订单:', order.orderNo);
	};
	
	// 根据状态返回背景颜色
	const getOrderStatusStyle = (status : string) => {
		const statusColors : Record<string, string> = {
			'待支付': '#F3A73F',  // 橙色
			'配送中': '#4CAF50',  // 绿色
			'待取件': '#2979FF',  // 蓝色
			'已完成': '#999999'   // 灰色
		};
		return {
			backgroundColor: statusColors[status] || '#FFFFFF',  // 默认背景为白色
			color: '#FFFFFF'  // 文字颜色为白色，确保在背景色上清晰可见
		};
	};
	
	const fetchOrderList = async () => {
		const response = await getPublishOrderList();
		if (response.code === 200) {
			orders.value = response.data
		}
	}
	
	
	const fetchGetAcceptOrderList = async () => {
		const response = await getAcceptOrderList();
		if (response.code === 200) {
			orders.value = response.data
		}
	}
	onLoad(() => {
		fetchGetAcceptOrderList();
	})
	
	
	const tabList = ref([
		{ title: '首页', icon: 'home' },
		{ title: '订单', icon: 'list' },
		{ title: '消息', icon: 'chat' },
		{ title: '我的', icon: 'person' }
	]);
	
	// 跳转到登录页面
	const goToLogin = () => {
	  isLogin.value = true
	  uni.navigateTo({
	    url: '/pages/login/login'  // 根据项目的实际路径调整
	  });
	};
	
	const goToModify = () => {
		uni.navigateTo({
			url: '/pages/modify/modify'
		});
	};
	
	const fetchUserData = async () => {
		try {
			const response = await getUserInfo();
			userData.value = response.data
			console.log(userData.value)
		} catch (error) {
			console.error('请求用户数据时出错:', error);
			userData.value = null;
		}
	};
	
	onShow(()=>{
		const token = uni.getStorageSync('token'); // 从 localStorage 获取 token
		if (token) {
			// 如果 token 存在，表示用户已登录
			isLogin.value = true;
		
			// 解析 token 获取用户 ID
			const id = getUserIdFromToken();
			if (id) {
				// 使用解析出的 ID 调用 API 获取用户数据
				fetchUserData();
			} else {
				console.error('无法从 token 中解析出用户 ID');
			}
		} else {
			// 如果 token 不存在，表示用户未登录
			isLogin.value = false;
		}
	})
</script>

<style scoped>
	.container {
		min-height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 用户信息区域样式 */
	.user-profile {
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		border: 2rpx solid #f0f0f0;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.user-details {
		flex: 1;
		margin-left: 30rpx;
	}

	.username {
		font-size: 18px;
		color: #333333;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.user-id {
		font-size: 12px;
		color: #999999;
	}

	.edit-profile {
		padding: 20rpx;
	}

	.user-stats {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		border-top: 1rpx solid #eeeeee;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-value {
		font-size: 18px;
		color: #333333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 12px;
		color: #999999;
	}

	/* 功能区域样式 */
	.feature-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.feature-row {
		display: flex;
		justify-content: space-between;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		flex: 1;
	}

	.feature-item text {
		font-size: 12px;
		color: #666666;
		margin-top: 16rpx;
	}

	/* 订单区域标题 */
	.order-section-title {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
		padding: 30rpx;
		background-color: #ffffff;
	}

	/* 订单类型切换样式 */
	.order-tabs {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.order-tabs .tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: #666666;
		position: relative;
	}

	.order-tabs .tab-item.active {
		color: #2979ff;
		font-weight: bold;
	}

	.order-tabs .tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	.order-count {
		font-size: 12px;
		color: #999999;
		margin-top: 4rpx;
	}

	/* 状态筛选样式 */
	.filter-section {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		overflow-x: auto;
		white-space: nowrap;
	}

	.filter-item {
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		font-size: 12px;
		color: #666666;
		background-color: #f5f5f5;
	}

	.filter-item.active {
		color: #ffffff;
		background-color: #2979ff;
	}

	/* 订单列表样式 */
	.order-list {
		flex: 1;
		overflow: auto;
	}

	.order-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.order-left {
		display: flex;
		align-items: center;
	}

	.order-number {
		font-size: 14px;
		color: #333333;
		margin-right: 20rpx;
	}

	.order-time {
		font-size: 12px;
		color: #999999;
	}

	.order-content {
		border-top: 1rpx solid #eeeeee;
		border-bottom: 1rpx solid #eeeeee;
		padding: 20rpx 0;
	}

	.location-info {
		margin-bottom: 20rpx;
	}

	.pickup-point,
	.delivery-point {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.pickup-point text,
	.delivery-point text {
		margin-left: 10rpx;
		font-size: 14px;
		color: #333333;
	}

	.order-details {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
	}

	.detail-item .label {
		font-size: 12px;
		color: #999999;
		margin-right: 10rpx;
	}

	.detail-item .value {
		font-size: 14px;
		color: #333333;
	}

	.detail-item .value.price {
		color: #ff3d00;
		font-weight: bold;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.total-amount {
		display: flex;
		align-items: center;
	}

	.total-amount .amount {
		font-size: 16px;
		color: #ff3d00;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}


	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 24rpx;
		background-color: #f5f5f5;
	}

	.user-details {
		flex: 1;
	}

	.login-prompt {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.login-text {
		font-size: 18px;
		color: #333333;
		font-weight: 500;
		margin-right: 8rpx;
	}

	.login-desc {
		font-size: 12px;
		color: #999999;
	}
</style>